<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="./css/styles/kissui.css">
	<link rel="stylesheet" href="./css/styles/reset.css">
	<link rel="stylesheet" href="./css/styles/bootstrap.css">
	<link rel="stylesheet" href="./css/styles/animate.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/css/swiper.min.css">
	<link rel="stylesheet" href="./css/pages/common.css">
	<link rel="stylesheet" href="./css/pages/index.css">
	<title>家护帮</title>
</head>

<body>
	<div id="app">
		<!--
            	作者：1169774483@qq.com
            	时间：2018-07-25
            	描述：头部
            -->
		<div class="head-tab">
			<div class="tab-info container">
				<div class="tab-icon">
					<img src="./images/icon/logo.png" alt="">
				</div>
				<div class="tab-list">
					<ul class="list-ul">
						<li class="li-aver">
							<a href="#">首页</a>
						</li>
						<li>
							<a href="pages/partnership.html">城市合伙</a>
						</li>
						<li>
							<a href="pages/service.html">企业服务</a>
						</li>
						<li>
							<a href="pages/Recruitment.html">人才招聘</a>
						</li>
						<li>
							<a href="pages/mediaReport.html">媒体报道</a>
						</li>
						<li>
							<a href="pages/about.html">关于我们</a>
						</li>
					</ul>
					<div class="ipone">
						<div class="ipone-icon">
							<img src="./images/icon/ipone.png" alt="">
						</div>
						<div class="ipone-number">400-993-6300 400</div>
					</div>
				</div>
			</div>
		</div>
		<!--
            	作者：1169774483@qq.com
            	时间：2018-07-25
            	描述：首页大图部分
            -->
		<div class="head-wapper">
			<div class="wapper-desc  animate-this bounceInRight animated">
				<div class="desc-title">
					<span>家护帮</span>累计服务家庭超万家</div>
				<div class="desc-wapper">
					<img class="desc-img" src="./images/icon/4.png" alt="" srcset="">
					<div class="desc-fuwu">
						<div class="fuwu-text">
							<div>共服务家庭：
								<span style="color: #ff8022">19‘041</span> 家 </div>
							<div>正在服务：
								<span style="color: #ff8022">5’645</span> 家</div>
							<div>已服务完成：
								<span style="color: #44a91e">13940</span> 家</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--
            	作者：1169774483@qq.com
            	时间：2018-07-25
            	描述：公司业务
            -->
		<div class="container">
			<div class="height70"></div>
			<div class="container-title">公司业务</div>
			<div class="height70"></div>
			<div class="son-title m-t-25">{{title}}</div>
			<div class="son-text">
				{{desc}}
			</div>
			<div class="son-xuanxiang">
				<div>
					<div class="select">
						<div v-for="(item , index) in selectList" :key="index" :class="'select-item ' + (index==setnum?'on':'no')" @click="selectClick(index)">
							<div class="itemImg-wapper">
								<img :src="item.smallImgUrl" alt="">
							</div>
							<div class="item-name">{{item.name}}</div>
						</div>
					</div>
					<div class="place-btn" @click="popUpClick">极速下单</div>
				</div>
				<div class="select-ren">
					<img :src="bigImgUrl" alt="">
				</div>
			</div>
			<div class="height70"></div>
			<transition leave-active-class="animated bounceOutDown" enter-active-class="animated bounce">
				<div class="pop-up" style="display: none;" v-show="popUp">
					<div class="cose" @click="popUp=false"><img src="images/icon/cose.png" alt=""></div>
					<img class="pocks" src="./images/icon/pock.png" alt="">
					<div class="title">找服务</div>
					<div class="pocks-wrapper">
						<div class="pocks-input">
							<span>姓名</span>
							<input type="text">
						</div>
						<div class="pocks-input">
							<span>联系电话</span>
							<input type="text">
						</div>
						<div class="pocks-input">
							<span>服务城市</span>
							<input type="text">
						</div>
						<div class="pocks-input">
							<span>我在寻找</span>
							<div class="pocks-xuanze">
								<div class="xuanze-item" v-for="(item , index) in selectList" :key="item.name" @click="xuanzeClick(index)">
									<span class="xuanze-iocn" :class="index==pock?'ons':''"></span>
									<span>{{item.name}}</span>
								</div>
							</div>
						</div>
						<div class="pocks-submit" @click="submitClick">提交</div>
					</div>
				</div>
			</transition>
		</div>
		<!--
            	作者：1169774483@qq.com
            	时间：2018-07-25
            	描述：公司简介
            -->

		<div class="container">
			<div class="height70"></div>
			<div class="height70"></div>
			<div class="container-title">公司业务</div>
			<div class="height70"></div>
			<div class="height70"></div>
			<div class="height70"></div>
			<div class="content" data-kui-anim="bounceIn">
				<div class="swiper-wapper">
					<div class="swiper-container">
						<div class="swiper-wrapper">
							<div class="swiper-slide" v-for="item in swiperList" :key="item">
								<img :src="item" alt="家护帮">
							</div>
						</div>
						<!-- 如果需要导航按钮 -->
						<div class="swiper-button-prev"></div>
						<div class="swiper-button-next swiper-button-white"></div>
					</div>
				</div>
				<div class="desc-wapper">
					<div class="desc-title">陕西家护帮网络科技有限公司</div>
					<div class="desc-info">公司前身为孝先队实业有限公司</div>
					<div class="desc-text">
						2017年实现线下到线上的转型，公司主做互联网家政服务， 作为一站式服务的C2C+O2O平台，提供专业的技能培训： 母婴护理、育儿服务、孕妈课堂、宝妈课堂、保姆、保洁、 高级管家等。通过“家护帮”APP平台，足不出户找保洁、保姆、 月嫂，妈妈再也不用担心无专人照顾老人小孩，帮助宝妈们的
						放飞自我，开开心心做辣妈！
					</div>
				</div>
			</div>
			<div class="height70"></div>
			<div class="height70"></div>
		</div>

		<!--
            	作者：1169774483@qq.com
            	时间：2018-07-25
            	描述：公司文化
            -->

		<div>
			<div class="container">
				<div class="height70"></div>
				<div class="container-title">公司文化</div>
				<div class="height70"></div>
				<div class="height70"></div>
			</div>
			<div class="enterprise">
				<div class="container" style="padding: 0;">
					<div class="top-wapper">
						<div class="top-1" @click="lookImagesClick(imgUrl1)">
							<img :src="imgUrl1" alt="">
						</div>
						<div class="top-2" @click="lookImagesClick(imgUrl2)">
							<img :src="imgUrl2" alt="">
						</div>
						<div class="top-3" @click="lookImagesClick(imgUrl3)">
							<img :src="imgUrl3" alt="">
						</div>
						<div class="top-4" @click="lookImagesClick(imgUrl4)">
							<img :src="imgUrl4" alt="">
						</div>
					</div>
					<div class="bottom-wapper">
						<div class="left" @click="lookImagesClick(imgUrl5)">
							<img :src="imgUrl5" alt="">
						</div>
						<div class="right">
							<div class="right-1" @click="lookImagesClick(imgUrl6)">
								<img :src="imgUrl6" alt="">
							</div>
							<div class="right-2">
								<div class="right-top">
									<div class="right-top-1" @click="lookImagesClick(imgUrl7)">
										<img :src="imgUrl7" alt="">
									</div>
									<div class="right-top-2" @click="lookImagesClick(imgUrl8)">
										<img :src="imgUrl8" alt="">
									</div>
								</div>
								<div class="right-bottom" @click="lookImagesClick(imgUrl9)">
									<img :src="imgUrl9" alt="">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="height70"></div>
			<div class="height70"></div>
			<div class="pock" style="display: none;" v-show="pocksate" @click="closeClick"></div>
			<transition leave-active-class="animated fadeOut" enter-active-class="animated fadeIn">
				<div v-show="close" class="pock-wrapper" @click="closeClick">
					<div class="pock-desc">周年活动照片图集</div>
					<div class="pock-title">周年庆典</div>
					<img class="pock-Url" :src="pockUrl" alt="">
				</div>
			</transition>
		</div>
		<!--
            	作者：1169774483@qq.com
            	时间：2018-07-25
            	描述：app下载
            -->

		<div>
			<div class="container">
				<div class="height70"></div>
				<div class="container-title">APP 下载</div>
				<div class="height70"></div>
			</div>
			<div class="download">
				<div class="container download-warpper">
					<div class="item">
						<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532437208&di=9906c09a4e74241bb494638816f0d929&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01d4b759362996a8012193a3acb90b.gif"
						 alt="">
						<div>家护帮公众号</div>
					</div>
					<div class="item">
						<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1532437208&di=9906c09a4e74241bb494638816f0d929&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01d4b759362996a8012193a3acb90b.gif"
						 alt="">
						<div>APP下载</div>
					</div>
				</div>
			</div>
			<div class="height70"></div>
			<div class="height70"></div>
		</div>

		<!--
            	作者：1169774483@qq.com
            	时间：2018-07-25
            	描述：媒体报道
            -->

		<div class="media">
			<img class="madia-bg" src="./images/icon/9.png" alt="">
			<div class="container">
				<div class="container-title">媒体报道</div>
				<div class="height70"></div>
				<div class="list-warpper">
					<div v-for="(item,index) in mediaList" :key="item.id" class="item-warpper">
						<div class="item-icon">{{item.time}}</div>
						<a href="pages/details.html">
							<div class="item-info">
								<div class="item-title">{{item.title}}</div>
								<div class="item-desc">{{item.desc}}</div>
							</div>
						</a>
					</div>
				</div>
			</div>
		</div>

		<!--
            	作者：1169774483@qq.com
            	时间：2018-07-25
            	描述：底部
            -->

		<div class="bottom">
			<div class="container">
				<div class="list-warpper">
					<a href="http://www.qq.com/" target="view_window">
						<img class="item-img" src="./images/logo/1.png" alt="">
					</a>
					<a href="http://www.ifeng.com/" target="view_window">
						<img class="item-img" src="./images/logo/2.png" alt="">
					</a>
					<a href="https://www.baidu.com/" target="view_window">
						<img class="item-img" src="./images/logo/3.png" alt="">
					</a>
					<a href="http://www.sina.com.cn/" target="view_window">
						<img class="item-img" src="./images/logo/4.png" alt="">
					</a>
					<a href="http://www.163.com/" target="view_window">
						<img class="item-img" src="./images/logo/5.png" alt="">
					</a>
					<a href="http://www.qq.com/" target="view_window">
						<img class="item-img" src="./images/logo/6.png" alt="">
					</a>
				</div>
				<div class="bottom-text">
					<p>
						家护帮服务平台 陕西省西安市碑林区长安北路一号2001室 技术支持：家护帮技术部 客服电话：400-993-6300
					</p>
					<p>
						Copyright 2016-2017 www.jiahubang.com All Rrights Reserved
					</p>
				</div>
			</div>
		</div>
		<div class="TOP" id="top" style="display: none;">
			<img src="images/icon/top.png" alt="">
			<p>TOP</p>
		</div>
	</div>
	<script src="./js/jq.js"></script>
	<script src="./js/vue.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.3/js/swiper.min.js"></script>
	<script src="./js/scrollanim.min.js"></script>
	<script src="./js/min.js"></script>
	<script>



		$(document).ready(function () {
			//页面滚动后出现返回顶部的按钮
			window.onscroll = function () { scrollFunction() };
			var top = $('#top')
			function scrollFunction() {
				if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 100) {
					top.css("display","flex")
				} else {
					top.css("display","none")
				}
			}
			// 点击按钮，返回顶部
			top.click(function () {
				$("html,body").animate({ scrollTop: 0 }, 500);
			});
		});


		var app = new Vue({
			el: '#app',
			data: {
				setnum: 0,
				pock: 0,
				title: '',
				desc: '',
				bigImgUrl: '',
				popUp: false,
				selectList: [{
					name: '月嫂',
					desc: '月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂月嫂',
					smallImgUrl: 'images/indeximg/yuesao2.png',
					bigImgUrl: 'images/indeximg/yuesao1.png',
				}, {
					name: '保姆',
					desc: '保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆保姆',
					smallImgUrl: 'images/indeximg/baomu2.png',
					bigImgUrl: 'images/indeximg/baomu1.png',
				}, {
					name: '育儿嫂',
					desc: '育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂育儿嫂',
					smallImgUrl: 'images/indeximg/yuer2.png',
					bigImgUrl: 'images/indeximg/yuer1.png',

				}, {
					name: '油烟机清洗',
					desc: '油烟机清洗油烟机清洗油烟机清洗油烟机清洗油烟机清洗油烟机清洗油烟机清洗油烟机清洗油烟机清洗',
					smallImgUrl: 'images/indeximg/youyan2.png',
					bigImgUrl: 'images/indeximg/youyan1.png',

				}, {
					name: '住家陪护',
					desc: '住家陪护住家陪护住家陪护住家陪护住家陪护住家陪护住家陪护住家陪护住家陪护住家陪护住家陪护',
					smallImgUrl: 'images/indeximg/zhujia2.png',
					bigImgUrl: 'images/indeximg/zhujia1.png',

				}, {
					name: '医院陪护',
					desc: '医院陪护医院陪护医院陪护医院陪护医院陪护医院陪护医院陪护医院陪护医院陪护医院陪护医院陪护',
					smallImgUrl: 'images/indeximg/peihu2.png',
					bigImgUrl: 'images/indeximg/peihu1.png',

				}, {
					name: '保洁',
					desc: '保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁保洁',
					smallImgUrl: 'images/indeximg/baojie2.png',
					bigImgUrl: 'images/indeximg/baojie1.png',

				}, {
					name: '钟点工',
					desc: '钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工钟点工',
					smallImgUrl: 'images/indeximg/zhongdian2.png',
					bigImgUrl: 'images/indeximg/zhongdian1.png',
				}],
				swiperList: [
					'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531415945445&di=a5cd6251afd9056cebaa0d3dec049415&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D57b4e7fb376d55fbd1cb7e65054b253f%2Fb3fb43166d224f4a5187f83603f790529822d1fd.jpg',
					'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531415945449&di=4cd07564d5dc3e500178e5224c48da03&imgtype=0&src=http%3A%2F%2Fwww.hnwomen.org.cn%2Fimg%2Fbig%2F2017%2F05%2F15%2F74a0904202066fa375d129ad200d12f4.jpg',
					'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531415945449&di=55a039810ca01fd0e134bd5fa546daee&imgtype=0&src=http%3A%2F%2Fimg01.e23.cn%2F2016%2F0826%2F20160826064950219.jpg',
					'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531415945448&di=998d046df4b3a8a0237ef0c7fc92f988&imgtype=0&src=http%3A%2F%2Fupload.techweb.com.cn%2F2016%2F0111%2F1452492370102.jpg',
					'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531415945446&di=45a94ec9e4116cc892a239e0e8a1bb5a&imgtype=0&src=http%3A%2F%2Fe.hiphotos.baidu.com%2Fbainuo%2Fcrop%3D0%2C26%2C471%2C285%3Bw%3D470%3Bq%3D79%2Fsign%3D87f33ab529a446236a85ff22a5125e3c%2F9213b07eca806538e606e4dc9edda144ac348215.jpg',
				],
				imgUrl1: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498089716&di=3443ea83878684942dbffdf4ba2cf9cc&imgtype=0&src=http%3A%2F%2Fupload.news.cecb2b.com%2F2015%2F0409%2F1428565327309.jpg',
				imgUrl2: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498090199&di=a2422136cb85d92a2d15e246d2ded99d&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3Ddc1f152a8d94a4c21e2eef68669d71a0%2F7c1ed21b0ef41bd5a7f91cd15bda81cb39db3d68.jpg',
				imgUrl3: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498090199&di=7be18f400bb768315eeb627db3bd37e8&imgtype=0&src=http%3A%2F%2Fattachment.jmw.com.cn%2Fimport%2Fimage%2Fyjz%2F9iY4ebVt3oYt.png',
				imgUrl4: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498153418&di=9db9e05c5b10280970698309c899290b&imgtype=jpg&src=http%3A%2F%2Fimg1.imgtn.bdimg.com%2Fit%2Fu%3D2914098696%2C2757997979%26fm%3D214%26gp%3D0.jpg',
				imgUrl5: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498175811&di=f28b5923725107df508352cda90b4ab7&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3Dce2966a2daa20cf4529df69c1e602143%2F30adcbef76094b363b04fac8a9cc7cd98d109d05.jpg',
				imgUrl6: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498175811&di=04b28383d4755081adcfd8631490a19e&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimage%2Fc0%253Dshijue1%252C0%252C0%252C294%252C40%2Fsign%3D18ca5ac65d2c11dfcadcb7600b4e08a5%2Fa8ec8a13632762d08d10399aaaec08fa513dc6ed.jpg',
				imgUrl7: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498219737&di=70420c3c26d8d9aa8188c85c363f5d83&imgtype=0&src=http%3A%2F%2Fimg105.job1001.com%2Fupload%2Falbum%2F2014-05-21%2F1400649559-O43FYVW_960_600.jpg',
				imgUrl8: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498219733&di=b2b333844c612e3824a23e44af34438b&imgtype=0&src=http%3A%2F%2Fpic.597.com%2Fcom%2F2016%2F04%2F28%2F16042802191941245.jpg',
				imgUrl9: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1531498219729&di=778d1886c91651cff955fd7aadafee0e&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ca9a596d861aa8012193a34d3d1e.jpg',
				pockUrl: '',
				pocksate: false,
				close: false,
				mediaList: [{
					id: '001',
					time: '2018.7.17',
					title: '专业和规范 阿姨帮家庭保洁体验报告',
					desc: '近日，互联网家庭服务O2O公司阿姨帮宣布在原有家电清洗的基础公司阿姨帮宣布在原有家电清洗的基础上又全新推出洗衣机清洗项目，这是阿姨帮继原有的五个家电清洗——空调，油烟机，冰箱，微波炉，电烤箱等项目上进行的又一次项目上新。'
				}, {
					id: '002',
					time: '2018.6.17',
					title: '颠覆传统搬家模式，阿姨帮日式搬家服务上线',
					desc: '近日，互联网家庭服务O2O公司阿姨帮宣布在原有家电清洗的基础上又全新推出洗衣机清洗项目，这是阿姨帮继原有的五个家电清洗——空调，油烟机，冰箱，微波炉，电烤箱等项目上进行的又一次项目上新。'
				}, {
					id: '003',
					time: '2018.5.17',
					title: '专业和规范 阿姨帮家庭保洁体验报告',
					desc: '近日，互联网家庭服务O2O公司阿姨帮宣布在原有家电清洗的基础上又全新推出洗衣机清洗项目，这是阿姨帮继原有的五个家电清洗——空调，油烟机，冰箱，微波炉，电烤箱等项目上进行的又一次项目上新。'
				}, {
					id: '004',
					time: '2018.4.17',
					title: '专业和规范 阿姨帮家庭保洁体验报告',
					desc: '近日，互联网家庭服务O2O公司阿姨帮宣布在原有家电清洗的基础上又全新推出洗衣机清洗项目，这是阿姨帮继原有的五个家电清洗——空调，油烟机，冰箱，微波炉，电烤箱等项目上进行的又一次项目上新。'
				},]
			},
			watch: {
				setnum: function (e) {
					this.title = this.selectList[e].name
					this.desc = this.selectList[e].desc
					this.bigImgUrl = this.selectList[e].bigImgUrl
				}
			},
			mounted: function () {
				this.title = this.selectList[0].name
				this.desc = this.selectList[0].desc
				this.bigImgUrl = this.selectList[0].bigImgUrl
			},
			methods: {
				selectClick: function (index) {
					this.setnum = index
				},
				popUpClick: function () {
					this.popUp = true
				},
				xuanzeClick: function (index) {
					this.pock = index
				},
				submitClick: function () {
					this.popUp = false
				},
				lookImagesClick: function (Url) {
					console.log(Url)
					this.pockUrl = Url
					this.pocksate = true
					setTimeout(() => {
						this.close = true
					}, 50)
				},
				closeClick: function () {
					this.close = false
					setTimeout(() => {
						this.pocksate = false
					}, 500)
				}
			}
		})

		var mySwiper = new Swiper('.swiper-container', {
			// 如果需要前进后退按钮
			navigation: {
				nextEl: '.swiper-button-next',
				prevEl: '.swiper-button-prev',
			}
		})
	</script>
</body>

</html>